<template>
    <div class="bot_message">
        <div class="row_1">
            <div class="content">
                <div class="icon">图标</div>
                <div ref="text" class="text" v-html="intent.text"></div>
                <div v-if="lookMoreShow" class="look_more">
                    <div class="button" @click="lookMore">
                        <span>查看更多</span>
                        <svg t="1667112040916" class="look_more_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1778"><path d="M138.410667 487.04l4.949333 4.48L512 860.16l368.64-368.64a65.152 65.152 0 0 1 87.765333-4.010667l4.352 4.010667c23.893333 23.893333 25.386667 61.610667 4.48 87.210667l-4.48 4.949333-414.72 414.72c-23.808 23.850667-61.568 25.344-87.168 4.437333l-4.949333-4.48-414.72-414.72a65.152 65.152 0 0 1 87.210667-96.597333zM968.405333 18.176l4.352 4.010667c23.893333 23.893333 25.386667 61.610667 4.48 87.210666l-4.48 4.949334-414.72 414.72c-23.808 23.850667-61.568 25.344-87.168 4.437333l-4.949333-4.48L51.2 114.346667A65.152 65.152 0 0 1 138.453333 17.749333L143.36 22.186667 512 390.826667 880.64 22.186667a65.152 65.152 0 0 1 87.765333-4.010667z" p-id="1779" fill="#d72618"></path></svg>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        intent: Object,
    },
    data() {
        return {
            lookMoreShow: false,
        }
    },
    mounted() {
        // 监控高度变化
        const t = setInterval(() => {
            if (this.$refs.text) {
                // 元素渲染完成
                const { clientHeight, scrollHeight } = this.$refs.text;
                if (clientHeight < scrollHeight) {
                    // 内容高度大于可视高度
                    this.lookMoreShow = true;
                }
                clearInterval(t)
            }
        }, 1);
    },
    methods: {
        lookMore() {
            this.$refs.text.style.maxHeight = '10000em';
            this.lookMoreShow = false;
        },
    },
}
</script>

<style scoped>
.bot_message {
    width: 100%;
}

.bot_message .row_1 {
    width: 100%;
    text-align: left;
}

.bot_message .row_1 .content {
    position: relative;
    display: inline-block;
    margin: 2em 1em 1em 2em;
    padding: 1.2em 1em 1.2em 1em;
    min-width: 3em;
    max-width: calc(100% - 5em);
    background-color: #ffffff;
    box-shadow: 0 0 .25em 0 #c6c6c6;
    border-radius: 0 .5em .5em .5em;
    text-align: left;
}

.bot_message .row_1 .content .icon {
    position: absolute;
    top: -1.7em;
    left: -1.7em;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: #dadada;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot_message .row_1 .content .text {
    transition: all .5s;
    position: relative;
    overflow: hidden;
    max-height: 20em;
}
.bot_message .row_1 .content .look_more {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2em;
    line-height: 2em;
    padding-top: 4em;
    text-align: center;
    background-image: linear-gradient(-180deg,#ffffff00 0%,#fff 100%);
    border-radius: 0 .5em .5em .5em;
}

.bot_message .row_1 .content .look_more .button {
    display: inline-flex;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    padding: 0 1em;
    color: #d72618;
    font-weight: 900;
    border-radius: 50% 50% 0 0;
    cursor: pointer;
}
.bot_message .row_1 .content .look_more_icon {
    display: inline-block;
    color: #d72618;
    cursor: pointer;
    height: .7em;
    margin: 0 .3em;
    position: relative;
    top: .1em;
}
</style>